<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-01-09 10:50:36
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2025-09-21 22:07:48
 * @Description: 我承接的任务组件 - 黑色主题
-->
<template>
    <div class="task-container" :style="{ minHeight: view.height + 'px' }">
      <!-- 页面头部 -->
      <div class="page-header">
        <div class="header-content">
          <h1 class="page-title">我的任务</h1>
          <p class="page-subtitle">管理和跟踪我承接的任务</p>
        </div>
      </div>
  
      <!-- 筛选条件区域 -->
      <div class="filter-container">
        <div class="filter-content">
          <div class="filter-row">
            <!-- 搜索框 -->
            <div class="filter-item search-item">
              <el-input
                v-model="searchQuery"
                placeholder="搜索任务名称或发起人"
                clearable
                @clear="handleSearch"
                @input="handleSearch"
                class="search-input"
              >
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
            </div>
  
            <!-- 任务状态筛选 -->
            <div class="filter-item">
              <el-select
                v-model="filters.myStatus"
                placeholder="我的状态"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部状态" value="" />
                <el-option label="申请中" value="applied" />
                <el-option label="进行中" value="inProgress" />
                <el-option label="已完成" value="completed" />
                <el-option label="已取消" value="cancelled" />
              </el-select>
            </div>
  
            <!-- 优先级筛选 -->
         <!--    <div class="filter-item">
              <el-select
                v-model="filters.priority"
                placeholder="优先级"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部优先级" value="" />
                <el-option label="高优先级" value="high" />
                <el-option label="中优先级" value="medium" />
                <el-option label="低优先级" value="low" />
              </el-select>
            </div> -->
  
            <!-- 职位要求筛选 -->
            <div class="filter-item">
              <el-select
                v-model="filters.positionRequirement"
                placeholder="职位要求"
                clearable
                @change="handleFilterChange"
                class="filter-select"
              >
                <el-option label="全部职位" value="" />
                <el-option label="科研助理" value="科研助理" />
                <el-option label="技术开发" value="技术开发" />
                <el-option label="业务秘书" value="业务秘书" />
              </el-select>
            </div>
  
            <!-- 操作按钮 -->
            <div class="filter-actions">
              <el-button type="primary" @click="handleSearch">
                <el-icon><Search /></el-icon>
                搜索
              </el-button>
              <el-button @click="handleReset">
                <el-icon><Refresh /></el-icon>
                重置
              </el-button>
            </div>
          </div>
  
          <!-- 统计信息 -->
          <div class="filter-stats">
            <span class="stats-text">
              共找到 <strong>{{ filteredTaskList.length }}</strong> 个任务
              <span v-if="hasActiveFilters" class="filter-hint">（已筛选）</span>
            </span>
            <div class="quick-filters">
              <el-tag
                v-for="(count, status) in myStatusStats"
                :key="status"
                :type="getMyStatusTagType(status)"
                size="small"
                class="stats-tag"
                @click="quickFilterByStatus(status)"
                :class="{ 'active': filters.myStatus === status }"
              >
                {{ getMyStatusText(status) }} ({{ count }})
              </el-tag>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 任务列表 -->
      <div class="task-list-container">
        <!-- 排序选项 -->
        <div class="sort-container">
          <span class="sort-label">排序：</span>
          <el-radio-group v-model="sortBy" @change="handleSort" size="small">
            <el-radio-button label="default">默认</el-radio-button>
            <el-radio-button label="deadline">截止日期</el-radio-button>
            <!-- <el-radio-button label="priority">优先级</el-radio-button> -->
            <el-radio-button label="updateTime">更新时间</el-radio-button>
          </el-radio-group>
        </div>
  
        <div class="task-list" v-if="paginatedTaskList.length > 0">
          <el-card
            v-for="task in paginatedTaskList"
            :key="task.id"
            class="task-card"
            :class="{ 
              'overdue': isOverdue(task.deadline) && task.myStatus === 'inProgress',
              'urgent': isUrgent(task.deadline) && task.myStatus === 'inProgress',
              'completed': task.myStatus === 'completed'
            }"
            shadow="hover"
          >
            <!-- 任务头部标签 -->
            <div class="task-header">
              <div class="task-tags">
                <el-tag 
                  :type="getMyStatusTagType(task.myStatus)"
                  size="small"
                  class="status-tag"
                >
                  {{ getMyStatusText(task.myStatus) }}
                </el-tag>
             <!--    <el-tag 
                  :type="getPriorityTagType(task.priority)"
                  size="small"
                  class="priority-tag"
                >
                  {{ getPriorityText(task.priority) }}
                </el-tag> -->
                <el-tag 
                  type="info"
                  size="small"
                  class="position-tag"
                >
                  {{ task.positionRequirement }}
                </el-tag>
              </div>
              <span class="task-id">#{{ task.id }}</span>
            </div>
  
            <!-- 任务标题 -->
            <h2 class="task-title" @click="viewTaskDetail(task)">
              {{ task.taskName }}
            </h2>
  
            <!-- 任务内容 -->
            <p class="task-content">
              {{ task.taskContent }}
            </p>
  
            <!-- 任务信息 -->
            <div class="task-info">
              <div class="info-item">
                <el-icon><User /></el-icon>
                <span>发起人：{{ task.initiator }}</span>
              </div>
              <div class="info-item">
                <el-icon><Clock /></el-icon>
                <span>工期：{{ task.workHours.startDate }} 至 {{ task.workHours.endDate }}</span>
              </div>
              <div class="info-item" v-if="task.myProgress !== undefined">
                <el-icon><TrendCharts /></el-icon>
                <span>进度：{{ task.myProgress }}%</span>
              </div>
            </div>
  
            <!-- 进度条 -->
            <div v-if="task.myStatus === 'inProgress' || task.myStatus === 'completed'" class="progress-section">
              <div class="progress-header">
                <span class="progress-label">任务进度</span>
                <span class="progress-value">{{ task.myProgress || 0 }}%</span>
              </div>
              <el-progress 
                :percentage="task.myProgress || 0" 
                :status="task.myStatus === 'completed' ? 'success' : undefined"
                :stroke-width="8"
              />
            </div>
  
            <!-- 申请时间和更新时间信息 -->
            <div class="time-info">
              <div class="time-item">
                <span class="time-label">申请时间：</span>
                <span class="time-value">{{ task.applyTime }}</span>
              </div>
              <div v-if="task.lastUpdate" class="time-item">
                <span class="time-label">最后更新：</span>
                <span class="time-value">{{ task.lastUpdate }}</span>
              </div>
              <div v-if="task.completedTime" class="time-item">
                <span class="time-label">完成时间：</span>
                <span class="time-value">{{ task.completedTime }}</span>
              </div>
            </div>
  
            <!-- 任务底部 -->
            <div class="task-footer">
              <div class="footer-info">
                <span class="deadline" :class="{ 'urgent': isUrgent(task.deadline), 'overdue': isOverdue(task.deadline) }">
                  <el-icon><Calendar /></el-icon>
                  截止日期：{{ task.deadline }}
                </span>
                <span v-if="task.attachments" class="attachments">
                  <el-icon><Paperclip /></el-icon>
                  {{ task.attachments.length }}个附件
                </span>
              </div>
              
              <div class="task-actions">
                <el-button 
                  v-if="task.myStatus === 'applied'"
                  type="danger"
                  size="small"
                  plain
                  @click="cancelApplication(task)"
                >
                  撤回申请
                </el-button>
                <el-button 
                  v-if="task.myStatus === 'inProgress'"
                  type="primary"
                  size="small"
                  @click="updateProgress(task)"
                >
                  更新进度
                </el-button>
                <el-button 
                  v-if="task.myStatus === 'inProgress' && task.myProgress >= 100"
                  type="success"
                  size="small"
                  @click="submitTask(task)"
                >
                  提交成果
                </el-button>
                <el-button 
                  size="small"
                  @click="viewTaskDetail(task)"
                >
                  查看详情
                </el-button>
              </div>
            </div>
          </el-card>
        </div>
  
        <!-- 空状态 -->
        <div v-else class="empty-state">
          <el-empty description="没有找到符合条件的任务">
            <el-button type="primary" @click="handleReset">重置筛选条件</el-button>
          </el-empty>
        </div>
  
        <!-- 分页 -->
        <div class="pagination-container" v-if="filteredTaskList.length > 0">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :total="filteredTaskList.length"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
  
      <!-- 进度更新对话框 -->
      <el-dialog
        v-model="showProgressDialog"
        title="更新任务进度"
        width="500px"
      >
        <el-form :model="progressForm" label-width="80px">
          <el-form-item label="任务名称">
            <span>{{ selectedTask?.taskName }}</span>
          </el-form-item>
          <el-form-item label="当前进度">
            <el-slider
              v-model="progressForm.progress"
              :max="100"
              show-input
              :format-tooltip="formatTooltip"
            />
          </el-form-item>
          <el-form-item label="工作说明">
            <el-input
              v-model="progressForm.description"
              type="textarea"
              :rows="4"
              placeholder="请描述本次工作内容和进展..."
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="showProgressDialog = false">取消</el-button>
          <el-button type="primary" @click="confirmUpdateProgress">确认更新</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { defineComponent, reactive, ref, toRefs, onMounted, watch, computed } from "vue";
  import { ElMessage, ElMessageBox } from "element-plus";
  import { 
    User, 
    UserFilled, 
    Clock, 
    Calendar, 
    Paperclip,
    Search,
    Refresh,
    TrendCharts
  } from '@element-plus/icons-vue';
  
  onMounted(() => {
    // 页面加载完成后的初始化操作
  });
  
  var view = reactive({
    height: window.innerHeight,
  });
  
  window.onresize = () => {
    view.height = window.innerHeight;
  };
  
  // 当前登录用户
  const currentUser = ref('李明');
  
  // 基础状态
  const showProgressDialog = ref(false);
  const selectedTask = ref(null);
  
  // 当前页码和每页显示数量
  const currentPage = ref(1);
  const pageSize = ref(10);
  
  // 搜索和筛选条件
  const searchQuery = ref('');
  const filters = reactive({
    myStatus: '',
    priority: '',
    positionRequirement: ''
  });
  
  // 排序方式
  const sortBy = ref('default');
  
  // 进度更新表单
  const progressForm = reactive({
    progress: 0,
    description: ''
  });
  
  // 我的任务数据
  const myTasks = ref([
    {
      id: 1,
      taskName: "水库安全监测数据分析",
      taskContent: "负责分析山东省小型水库监测数据，包括水位、流量等关键指标的统计分析，并编制相关技术报告",
      initiator: "张主任",
      positionRequirement: "科研助理",
      myStatus: "inProgress", // applied, inProgress, completed, cancelled
      myProgress: 75,
      priority: "high",
      workHours: {
        startDate: "2025-09-20",
        endDate: "2025-10-15"
      },
      deadline: "2025-10-15",
      attachments: ["监测数据.xlsx", "技术要求.pdf"],
      lastUpdate: "2025-09-20 14:30",
      applyTime: "2025-09-15 10:00"
    },
    {
      id: 4,
      taskName: "气象预警模型验证",
      taskContent: "对新开发的气象预警模型进行历史数据验证，分析模型准确率，优化参数配置，编写验证报告",
      initiator: "赵研究员",
      positionRequirement: "科研助理",
      myStatus: "inProgress",
      myProgress: 45,
      priority: "medium",
      workHours: {
        startDate: "2025-09-25",
        endDate: "2025-10-20"
      },
      deadline: "2025-10-20",
      attachments: ["历史数据.csv", "模型文档.pdf"],
      lastUpdate: "2025-09-21 09:15",
      applyTime: "2025-09-18 16:20"
    },
    {
      id: 9,
      taskName: "应急预案数据库建设",
      taskContent: "构建应急预案数据库系统，整理各类灾害应急预案，建立检索和管理功能",
      initiator: "王主管",
      positionRequirement: "技术开发",
      myStatus: "applied",
      myProgress: 0,
      priority: "medium",
      workHours: {
        startDate: "2025-10-01",
        endDate: "2025-11-15"
      },
      deadline: "2025-11-15",
      attachments: null,
      lastUpdate: null,
      applyTime: "2025-09-21 11:30"
    },
    {
      id: 10,
      taskName: "洪涝灾害风险评估报告",
      taskContent: "编制2025年度洪涝灾害风险评估报告，分析气候变化对防洪减灾的影响",
      initiator: "陈教授",
      positionRequirement: "科研助理",
      myStatus: "completed",
      myProgress: 100,
      priority: "high",
      workHours: {
        startDate: "2025-08-15",
        endDate: "2025-09-10"
      },
      deadline: "2025-09-10",
      attachments: ["评估报告.pdf", "数据分析.xlsx", "图表汇总.pptx"],
      lastUpdate: "2025-09-10 17:45",
      applyTime: "2025-08-10 14:20",
      completedTime: "2025-09-10 17:45"
    },
    {
      id: 11,
      taskName: "智能监测设备调试",
      taskContent: "对新采购的智能监测设备进行安装调试，确保设备正常运行并接入监控平台",
      initiator: "刘工程师",
      positionRequirement: "技术开发",
      myStatus: "inProgress",
      myProgress: 30,
      priority: "low",
      workHours: {
        startDate: "2025-09-18",
        endDate: "2025-09-25"
      },
      deadline: "2025-09-22", // 已超期
      attachments: ["设备手册.pdf"],
      lastUpdate: "2025-09-19 16:00",
      applyTime: "2025-09-16 09:30"
    }
  ]);
  
  // 计算属性：筛选后的任务列表
  const filteredTaskList = computed(() => {
    let result = [...myTasks.value];
  
    // 按搜索关键词筛选
    if (searchQuery.value.trim()) {
      const query = searchQuery.value.toLowerCase().trim();
      result = result.filter(task => 
        task.taskName.toLowerCase().includes(query) ||
        task.initiator.toLowerCase().includes(query) ||
        task.taskContent.toLowerCase().includes(query)
      );
    }
  
    // 按我的状态筛选
    if (filters.myStatus) {
      result = result.filter(task => task.myStatus === filters.myStatus);
    }
  
    // 按优先级筛选
    if (filters.priority) {
      result = result.filter(task => task.priority === filters.priority);
    }
  
    // 按职位要求筛选
    if (filters.positionRequirement) {
      result = result.filter(task => task.positionRequirement === filters.positionRequirement);
    }
  
    // 排序
    if (sortBy.value !== 'default') {
      result.sort((a, b) => {
        switch (sortBy.value) {
          case 'deadline':
            return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
          case 'priority':
            const priorityOrder = { 'high': 3, 'medium': 2, 'low': 1 };
            return priorityOrder[b.priority] - priorityOrder[a.priority];
          case 'updateTime':
            const aTime = a.lastUpdate ? new Date(a.lastUpdate).getTime() : 0;
            const bTime = b.lastUpdate ? new Date(b.lastUpdate).getTime() : 0;
            return bTime - aTime;
          default:
            return 0;
        }
      });
    }
  
    return result;
  });
  
  // 计算属性：分页后的任务列表
  const paginatedTaskList = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredTaskList.value.slice(start, end);
  });
  
  // 计算属性：是否有活动的筛选条件
  const hasActiveFilters = computed(() => {
    return searchQuery.value.trim() !== '' ||
           filters.myStatus !== '' ||
           filters.priority !== '' ||
           filters.positionRequirement !== '';
  });
  
  // 计算属性：我的状态统计
  const myStatusStats = computed(() => {
    const stats = {};
    myTasks.value.forEach(task => {
      stats[task.myStatus] = (stats[task.myStatus] || 0) + 1;
    });
    return stats;
  });
  
  // 判断是否超期
  const isOverdue = (deadline: string) => {
    return new Date(deadline) < new Date();
  };
  
  // 判断是否紧急
  const isUrgent = (deadline: string) => {
    const deadlineDate = new Date(deadline);
    const today = new Date();
    const diffDays = Math.ceil((deadlineDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
    return diffDays <= 3 && diffDays >= 0;
  };
  
  // 获取我的状态标签类型
  const getMyStatusTagType = (status: string) => {
    switch (status) {
      case 'applied':
        return 'warning';
      case 'inProgress':
        return 'primary';
      case 'completed':
        return 'success';
      case 'cancelled':
        return 'info';
      default:
        return 'info';
    }
  };
  
  // 获取我的状态文本
  const getMyStatusText = (status: string) => {
    switch (status) {
      case 'applied':
        return '申请中';
      case 'inProgress':
        return '进行中';
      case 'completed':
        return '已完成';
      case 'cancelled':
        return '已取消';
      default:
        return '未知';
    }
  };
  
  // 获取优先级标签类型
  const getPriorityTagType = (priority: string) => {
    switch (priority) {
      case 'high':
        return 'danger';
      case 'medium':
        return 'warning';
      case 'low':
        return 'info';
      default:
        return 'info';
    }
  };
  
  // 获取优先级文本
  const getPriorityText = (priority: string) => {
    switch (priority) {
      case 'high':
        return '高优先级';
      case 'medium':
        return '中优先级';
      case 'low':
        return '低优先级';
      default:
        return '未设置';
    }
  };
  
  // 格式化进度提示
  const formatTooltip = (val: number) => {
    return `${val}%`;
  };
  
  // 处理搜索
  const handleSearch = () => {
    currentPage.value = 1;
  };
  
  // 处理筛选条件变化
  const handleFilterChange = () => {
    currentPage.value = 1;
  };
  
  // 处理重置
  const handleReset = () => {
    searchQuery.value = '';
    filters.myStatus = '';
    filters.priority = '';
    filters.positionRequirement = '';
    sortBy.value = 'default';
    currentPage.value = 1;
    ElMessage.success('筛选条件已重置');
  };
  
  // 处理排序
  const handleSort = () => {
    currentPage.value = 1;
  };
  
  // 快速按状态筛选
  const quickFilterByStatus = (status: string) => {
    if (filters.myStatus === status) {
      filters.myStatus = '';
    } else {
      filters.myStatus = status;
    }
    handleFilterChange();
  };
  
  // 查看任务详情
  const viewTaskDetail = (task: any) => {
    ElMessage.info(`查看任务详情：${task.taskName}`);
  };
  
  // 更新进度
  const updateProgress = (task: any) => {
    selectedTask.value = task;
    progressForm.progress = task.myProgress || 0;
    progressForm.description = '';
    showProgressDialog.value = true;
  };
  
  // 确认更新进度
  const confirmUpdateProgress = () => {
    if (!selectedTask.value) return;
    
    const taskIndex = myTasks.value.findIndex(t => t.id === selectedTask.value.id);
    if (taskIndex !== -1) {
      myTasks.value[taskIndex].myProgress = progressForm.progress;
      myTasks.value[taskIndex].lastUpdate = new Date().toLocaleString('zh-CN');
    }
    
    showProgressDialog.value = false;
    ElMessage.success('进度更新成功');
  };
  
  // 提交任务
  const submitTask = (task: any) => {
    ElMessageBox.confirm(
      `确定要提交任务"${task.taskName}"吗？提交后将无法再次修改。`,
      '提交确认',
      {
        confirmButtonText: '确定提交',
        cancelButtonText: '取消',
        type: 'info',
      }
    ).then(() => {
      const taskIndex = myTasks.value.findIndex(t => t.id === task.id);
      if (taskIndex !== -1) {
        myTasks.value[taskIndex].myStatus = 'completed';
        myTasks.value[taskIndex].myProgress = 100;
        myTasks.value[taskIndex].completedTime = new Date().toLocaleString('zh-CN');
        myTasks.value[taskIndex].lastUpdate = new Date().toLocaleString('zh-CN');
      }
      ElMessage.success('任务提交成功！');
    });
  };
  
  // 撤回申请
  const cancelApplication = (task: any) => {
    ElMessageBox.confirm(
      `确定要撤回对任务"${task.taskName}"的申请吗？`,
      '撤回确认',
      {
        confirmButtonText: '确定撤回',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      const taskIndex = myTasks.value.findIndex(t => t.id === task.id);
      if (taskIndex !== -1) {
        myTasks.value[taskIndex].myStatus = 'cancelled';
      }
      ElMessage.success('申请已撤回');
    });
  };
  
  // 分页处理
  const handlePageChange = (page: number) => {
    currentPage.value = page;
  };
  
  // 每页显示数量变化处理
  const handleSizeChange = (size: number) => {
    pageSize.value = size;
    currentPage.value = 1;
  };
  </script>
  
  <style lang="scss" scoped>
  .task-container {
    background-color: var(--el-bg-color-page);
    padding: 0;
  }
  
  .page-header {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color);
    padding: 24px 0;
    
    .header-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      
      .page-title {
        font-size: 24px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 8px 0;
      }
      
      .page-subtitle {
        font-size: 14px;
        color: var(--el-text-color-regular);
        margin: 0;
      }
    }
  }
  
  .filter-container {
    background-color: var(--el-bg-color);
    border-bottom: 1px solid var(--el-border-color-lighter);
    padding: 20px 0;
    
    .filter-content {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      
      .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        align-items: center;
        margin-bottom: 16px;
        
        .filter-item {
          flex-shrink: 0;
          
          &.search-item {
            flex: 1;
            min-width: 200px;
            max-width: 300px;
          }
        }
        
        .search-input {
          width: 100%;
        }
        
        .filter-select {
          width: 140px;
        }
        
        .filter-actions {
          display: flex;
          gap: 8px;
          margin-left: auto;
        }
      }
      
      .filter-stats {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px;
        
        .stats-text {
          font-size: 14px;
          color: var(--el-text-color-regular);
          
          strong {
            color: var(--el-text-color-primary);
          }
          
          .filter-hint {
            color: var(--el-color-primary);
            font-size: 12px;
          }
        }
        
        .quick-filters {
          display: flex;
          gap: 8px;
          flex-wrap: wrap;
          
          .stats-tag {
            cursor: pointer;
            transition: all 0.2s;
            
            &:hover {
              transform: translateY(-1px);
            }
            
            &.active {
              border-color: var(--el-color-primary);
              background-color: var(--el-color-primary-light-9);
            }
          }
        }
      }
    }
  }
  
  .task-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
  }
  
  .sort-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    
    .sort-label {
      font-size: 14px;
      color: var(--el-text-color-regular);
    }
  }
  
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .empty-state {
    text-align: center;
    padding: 60px 0;
  }
  
  .task-card {
    border: 1px solid var(--el-border-color);
    transition: all 0.3s ease;
    
    &:hover {
      border-color: var(--el-color-primary);
      transform: translateY(-2px);
    }
    
    &.overdue {
      border-left: 4px solid var(--el-color-danger);
      background-color: rgba(245, 101, 101, 0.05);
    }
    
    &.urgent {
      border-left: 4px solid var(--el-color-warning);
    }
    
    &.completed {
      opacity: 0.8;
      
      .task-title {
        text-decoration: line-through;
        color: var(--el-text-color-secondary);
      }
    }
    
    :deep(.el-card__body) {
      padding: 20px;
    }
  }
  
  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    
    .task-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .status-tag, .priority-tag, .position-tag {
        font-size: 12px;
      }
    }
    
    .task-id {
      font-size: 12px;
      color: var(--el-text-color-placeholder);
      font-weight: 500;
    }
  }
  
  .task-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
    margin: 0 0 12px 0;
    cursor: pointer;
    line-height: 1.4;
    
    &:hover {
      color: var(--el-color-primary);
    }
  }
  
  .task-content {
    font-size: 14px;
    color: var(--el-text-color-regular);
    line-height: 1.6;
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .task-info {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    
    .info-item {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--el-text-color-regular);
      
      .el-icon {
        font-size: 14px;
      }
    }
  }
  
  .progress-section {
    margin-bottom: 16px;
    
    .progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      
      .progress-label {
        font-size: 14px;
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
      
      .progress-value {
        font-size: 14px;
        color: var(--el-text-color-regular);
        font-weight: 600;
      }
    }
  }
  
  .time-info {
    margin-bottom: 16px;
    background-color: var(--el-fill-color-light);
    border-radius: 6px;
    padding: 12px;
    
    .time-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 4px;
      font-size: 12px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .time-label {
        color: var(--el-text-color-regular);
      }
      
      .time-value {
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
    }
  }
  
  .task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid var(--el-border-color-lighter);
    
    .footer-info {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      
      .deadline, .attachments {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--el-text-color-regular);
        
        &.urgent {
          color: var(--el-color-warning);
          font-weight: 600;
        }
        
        &.overdue {
          color: var(--el-color-danger);
          font-weight: 600;
        }
        
        .el-icon {
          font-size: 14px;
        }
      }
    }
    
    .task-actions {
      display: flex;
      gap: 8px;
    }
  }
  
  .pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 32px;
  }
  
  // 响应式设计
  @media (max-width: 1024px) {
    .filter-content {
      .filter-row {
        .filter-item.search-item {
          flex: 1 1 100%;
          max-width: none;
        }
        
        .filter-actions {
          margin-left: 0;
          width: 100%;
          justify-content: center;
        }
      }
      
      .filter-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        
        .quick-filters {
          width: 100%;
          justify-content: center;
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .page-header .header-content,
    .filter-content,
    .task-list-container {
      padding: 0 16px;
    }
    
    .filter-container {
      padding: 16px 0;
    }
    
    .task-list-container {
      padding: 20px 16px;
    }
  
    .filter-content {
      .filter-row {
        flex-direction: column;
        align-items: stretch;
        
        .filter-item {
          width: 100%;
          
          .filter-select {
            width: 100%;
          }
        }
        
        .filter-actions {
          flex-direction: row;
          gap: 12px;
          
          .el-button {
            flex: 1;
          }
        }
      }
    }
  
    .sort-container {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    
    .task-card :deep(.el-card__body) {
      padding: 16px;
    }
    
    .task-header {
      flex-direction: column;
      gap: 8px;
      align-items: flex-start;
    }
    
    .task-info {
      flex-direction: column;
      gap: 8px;
    }
    
    .task-footer {
      flex-direction: column;
      gap: 12px;
      align-items: stretch;
      
      .footer-info {
        flex-direction: column;
        gap: 8px;
      }
      
      .task-actions {
        justify-content: flex-end;
      }
    }
  }
  </style>
  